<template>
  <div class="productdetails">
    <div class="head" v-if="datalists">
      <div class="carousel_chart">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in datalists.logImg" :key="index">
            <div class="img" :style="{'background': 'url('+datalists.logImg[index]+') no-repeat center / cover'}"></div>
          </van-swipe-item>
        </van-swipe>
        <div class="vendor">供应商：{{datalists.numbering}}</div>
        <div class="numbering">编号：J042173</div>
        
      </div>

      <div class="price">
        <i>￥</i><span>{{datalists.price}}</span><em>起</em>
        <div class="initial_price">
          <img
            src="https://jjh5.jjtravel.com/images/product-trip/price-intro.png"
            alt=""
          />
          起价说明
        </div>
      </div>

      <div class="detailed">
        <h3>{{datalists.title}}</h3>
        <div class="content">{{datalists.content}}</div>
        <div class="manner">
          <div class="freely">{{datalists.category}}</div>
          <img :src="datalists.img" alt=""/>
        </div>
      </div>
    </div>

    <div class="itinerary">
      <div class="title">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/brief.png"
          alt=""
        />
        行程概要
      </div>
      <div class="stops">
        <div class="stop_a">D01 上海-上海</div>
        <div class="stop_a">D02 上海-上海</div>
      </div>
      <div class="title">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/suggestion.png"
          alt=""
        />
        产品经理推荐
      </div>
      <div class="features">
        <div class="feature"><i></i> 4人、6人精致晚餐，家庭聚会优选！</div>
        <div class="feature"><i></i> 平日周末同价</div>
      </div>
    </div>

    <div class="features section">
      <div class="title">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-left.png"
        />
        产品特色
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-right.png"
        />
      </div>
      <div class="content">
        上海虹桥郁锦香宾馆位于虹桥开发区，毗邻国际贸易中心和世贸商城，紧邻内环和延安路高架及其他交通主干道，地铁3/4号线便在附近。驱车约20分钟便可抵达多个目的地，如新建的国家会展中心、淮海路高档商业街等。诸多商务大楼、购物中心、餐厅及娱乐场所均近在咫尺。上海虹桥郁锦香宾馆乃是郁金香崭新品牌定位的旗舰，是集生活、工作、旅行为一体并富于当地文化的妙趣理念。这座时尚的新面貌酒店有30层高，共有客房近六百余间，房内配设齐全。酒店设有1200平方米的会议场所，拥有高科技一流的会议设施，包含无柱式大型宴会厅和其他多功能厅。此外，宾客可以在宾馆4个高品质餐厅（中餐厅、日式餐厅、法式餐厅等）以及3个酒吧（屋顶酒吧、大堂吧和香槟吧）大快朵颐。咖啡厅位于大堂吧“趣味酒廊联合办公空间”，因而您无需选择办公还是休闲而可以两者得兼。酒店配有整层健身中心，阁下可以在此健身以及修养身心。
      </div>
    </div>

    <div class="section collapsed">
      <div class="title">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-left.png"
        />
        产品特色
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-right.png"
        />
      </div>

      <div class="stops_a">
        <div class="day">D1</div>
        上海
      </div>
      <div class="item">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/stops/hotel.png"
          alt=""
        />
        <em>酒店</em>
        <span>虹桥郁锦香宾馆豪华房</span>
      </div>
      <div class="stops_a">
        <div class="day">D2</div>
        上海
      </div>
      <div class="more">
        <span>查看更多</span
        ><img
          src="https://jjh5.jjtravel.com/images/product-trip/more.png"
          alt=""
        />
      </div>
    </div>

    <div class="section">
      <div class="title">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-left.png"
        />
        费用介绍
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-right.png"
        />
      </div>
      <p>--费用包含--</p>
      <div class="txt">
        <div>
          【4人套餐】1、豪华房（大/双)入住两间。2、次日双人自助早餐3、—楼味翠餐厅四人份中式套餐(晚餐)4、免费停车场
        </div>
        <div>
          【6人套餐】1、豪华房（大/双)入住三间。2、次日双人自助早餐3、—楼味翠餐厅六人份中式套餐（(晚餐)4、免费停车场
        </div>
      </div>
      <p>--费用包含--</p>
      <div class="txt">
        <div>1.交通费:不含任何交通费用。</div>
        <div>2.单房差:单人入住需补单房差。</div>
        <div>3.用餐:除套餐内已包含的所有正餐。</div>
        <div>4.保险:不含任何旅行保险，我们强烈建议旅游者自行购买。</div>
        <div>
          5.其他费用:包括但不限于酒店内洗衣、电话、传真、收费电视、mini吧、其他餐饮等个人消费。
        </div>
      </div>
    </div>

    <div class="section">
      <div class="title">
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-left.png"
        />
        预定须知
        <img
          src="https://jjh5.jjtravel.com/images/product-trip/head-right.png"
        />
      </div>

      <div class="txt">
        <div>1.旅游者需自行前往酒店、景点。</div>
        <div>2.请旅游者在游览过程中，注意人身及财产安全。</div>
        <div>3.请随身携带有效旅行证件，办理入住手续时需出示。</div>
        <div>
          4.本产品提供的房间不保证大床房或双床房，可在报名时提出，但最终入住房型需视酒店房态而定。
        </div>
        <div>
          5.请旅游者在报名时留下准确手机号码。6.已提示购买旅游意外保险。
        </div>
        <div>
          7.预订一经确认，不可更改任何信息，不可取消。如取消或未到店入住，将扣除全部费用，不可退还，敬请谅解!
        </div>
      </div>
      <p>--费用标准--</p>
      <div class="txt">
        <div>
          【4人套餐】1、豪华房（大/双)入住两间。2、次日双人自助早餐3、—楼味翠餐厅四人份中式套餐(晚餐)4、免费停车场
        </div>
        <div>
          【6人套餐】1、豪华房（大/双)入住三间。2、次日双人自助早餐3、—楼味翠餐厅六人份中式套餐（(晚餐)4、免费停车场
        </div>
      </div>
    </div>

    <div class="footer">
      <p>--划线价说明--</p>
      <div>
        划线价格指该旅游产品的初上市价格、旺季销售价格、门市价、服务提供商的指导价、零售价或该产品或服务曾经展示过的销售介等，并非原价未划线价格指产品或服务的实时标价，具体成交价格根据产品或服务参加活动，或会员使用优惠券等发生变化，最终以订单结算页价格为准。除特别注明无自费外，其他旅游行程均可能有自费项目;自费项目属于自愿性质不存在强迫，游客可根据自身需求自行决定;具体事宜详见行程单或咨询我司人员。
      </div>
    </div>

    <div class="footer_nav">
      <div class="schedule">
        <span class="iconfont icon-fanhui" @click="back">返回</span>
      </div>
      <div class="book_now" @click="toOrder">立即预订</div>
    </div>
  </div>
</template>

<script>
import { getOrderList } from "../api/home";
export default {
  data() {
    return {
      datalists:null,
      dataIndex:0,


      datasId:[],
    };
  },
  methods: {
     getOrderListFun() {
      getOrderList().then(data=>{
        this.datalists = data.data.order[this.dataIndex]
        // console.log(this.datalists);
      })
    },
    back(){
      this.$router.back()
    },
    toOrder(){
      let userId = localStorage.getItem("userId")
      if(userId&&userId!="null"){
        this.$router.push({name:'orders',query:{data:this.datalists} });
      }else{
        this.$dialog
        .confirm({
          title: "是否前往登录？",
        })
        .then(() => {
         this.$router.push("/userinfo")
        })
        .catch(() => {
          
        });
      }
    }
  },
  created() {
    this.datalists = this.$route.query.data;
    // console.log(this.datalists);
    // this.getOrderListFun()

    if (localStorage.getItem("idArray")!="null") {
      this.datasId.push(localStorage.getItem("idArray"))
    }
    this.datasId.push(this.datalists.id)
    localStorage.setItem("idArray",this.datasId);
    // console.log( localStorage.getItem("idArray"));
  },
  
};
</script>

<style lang="scss" scoped>
.productdetails {
  background-color: #f5f5f5;

  .footer_nav {
    z-index: 999;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 55px;
    background-color: #fff;
    display: flex;
    .book_now {
      font-size: 18px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      
      flex: 1;
      background: linear-gradient(to right,#FF9A8D,#FF2150);
    }
    .schedule {
      color: #333;
      width: 75px;
      display: flex;
      flex-direction: column;
      align-items: center;

      justify-content: center;
      font-size: 12px;
      img {
        width: 18px;
        height: 18px;
        margin-bottom: 5.5px;
      }
    }
  }
  .head {
    background-color: #fff;
    padding-bottom: 20px;
    .carousel_chart {
      position: relative;
      
      .vendor {
          color: #fff;
          font-size: 12px;
          position: absolute;
          bottom: 8px;
          left: 14px;
        }
        .numbering {
          color: #fff;
          font-size: 12px;
          position: absolute;
          bottom: 8px;
          right: 14px;
        }
      .img {
        width: 100%;
        height: 210px;
        
      }
    }
    .price {
      margin-top: 24px;
      margin-left: 15px;
      color: #ff5341;
      display: flex;
      align-items: flex-end;
      em {
        font-size: 13px;
      }
      span {
        font-size: 18px;
        line-height: 16px;
        font-weight: bold;
      }
      i {
        font-size: 12px;
        transform: scale(0.9);
      }
      .initial_price {
        margin-left: 15px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #15bc21;
        img {
          height: 11px;
          width: 11px;
          margin-right: 4px;
        }
      }
    }
    .detailed {
      margin-left: 15px;
      margin-right: 15px;
      margin-top: 20px;
      h3 {
        font-size: 20px;
        color: #333333;
      }
      .content {
        margin-top: 8px;
        font-size: 14px;
      }
      .manner {
        margin-top: 10px;
        display: flex;
        .freely {
          padding: 2px 7px;
          font-size: 12px;
          color: #83d7d2;
          background-color: #edf1f6;
          margin-right: 10px;
        }
        img {
          height: 18px;
        }
      }
    }
  }
  .itinerary {
    margin-top: 10px;
    background-color: #fff;
    .title {
      padding-top: 20px;
      display: flex;
      margin-left: 15px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .stops {
      margin-top: 20px;
      margin-left: 15px;
      font-size: 14px;
      color: #333;
    }
    .features {
      margin: 20px 15px 0 15px;
      font-size: 14px;
      color: #333;
      padding-bottom: 20px;
      .feature {
        display: flex;
        align-items: center;
        i {
          display: block;
          width: 4px;
          height: 4px;
          background-color: #eb5e18;
          border-radius: 2px;
          margin-right: 7px;
        }
      }
    }
  }
  .section {
    margin-top: 10px;
    .txt {
      margin: 7px 15px 15px;
      font-size: 14px;
      padding-bottom: 15px;
    }
    p {
      color: #eb5e18;
      font-size: 14px;
      margin-top: 20px;
      margin-left: 15px;
    }
    margin-top: 10px;
    background-color: #fff;
    .title {
      padding-top: 20px;
      justify-content: center;
      display: flex;
      align-items: flex-end;
      font-size: 17px;
      img {
        width: 15px;
        margin: 0 9px;
        margin-bottom: 5px;
        height: 5px;
      }
    }
    .content {
      margin: 20px 15px 0 15px;
      font-size: 14px;
      padding-bottom: 20px;
    }
  }
  .collapsed {
    .more {
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #80d7d1;
      img {
        width: 8.5px;
        margin-left: 5.5px;
        height: 5px;
      }
    }
    .item {
      margin: 27px 15px 15px;
      color: #333;
      font-size: 14px;
      display: flex;
      span {
        font-size: 14px;
        font-weight: bold;
        margin-left: 2px;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 14px;
      }
    }
    .stops_a {
      font-size: 18px;
      color: #333;
      margin: 23.5px 15px 19.5px;
      display: flex;
      font-weight: bold;

      .day {
        font-size: 24px;
        margin-right: 21;
      }
    }
  }
  .footer {
    margin: 25px 15px;
    padding-bottom: 85px;
    color: #b8b8b8;
    text-align: center;
    font-size: 12px;
  }
}
</style>